<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>神灯速贸</title>
        <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta content="telephone=no" name="format-detection" />
        <meta name="msapplication-tap-highlight" content="no"/>
        <link rel="stylesheet" href="../css/animate.css">
        <link rel="stylesheet" href="../css/public.css">
        <link rel="stylesheet" href="../css/pull.css">
        <link rel="stylesheet" href="../css/main.css">
        <script src="../js/zepto.min.js"></script>
        <script src="../js/iscroll.js"></script>
        <script src="../js/main.js"></script>
        <script src="../js/iscroll_constructor.js"></script>
    </head>
    <body>
        <header class="header" style="display: block;">
            <div class="title">贸易订单</div>
            <a class="btn-back" href="#"><span>订单中心</span></a>
        </header>

        <div class="main container order-page">
            <nav id="nav-index" class="active1" data-active="1">
                <ul>
                  <li><a class="active" href="#">所有订单</a></li>
                  <li><a href="#">执行中</a></li>
                  <li><a href="#">待评价</a></li>
                </ul>
                <div class="active-bar"></div>
            </nav>
            
            <div id="page1-wrapper" class="scroll-wrapper animated active">
                <div id="scroller1" class="scroler">

                    <div id="page1-pull-down" class="pull-down">
                        <span class="pull-down-icon"></span>
                        <span id="page1-pull-down-label" class="pull-down-label">下拉刷新...</span>
                    </div>

                    <ul class="pt-list">
                        <li class="pt">
                            <a href="#">
                                <div class="name my-ellipsis">
                                    XD123456789<span class="order-tag-red">执行中</span>
                                </div>
                                <p><span>商品：</span>
                                    <span class="c-purple">红富士苹果、小乡里、东北大番茄</span>
                                </p>
                                <p><span>交货地：</span>
                                    <span>乌兰乌德满洲里园区1号仓库</span>
                                </p>
                                <p><span>采购商：</span>
                                    <span>伏尔加河贸易有限公司</span>
                                </p>
                            </a>
                        </li>
                        <li class="pt">
                            <a href="#">
                                <div class="name my-ellipsis">
                                    XD123456789<span class="order-tag-gray">已取消</span>
                                </div>
                                <p><span>商品：</span>
                                    <span class="c-purple">红富士苹果、小乡里、东北大番茄</span>
                                </p>
                                <p><span>交货地：</span>
                                    <span>乌兰乌德满洲里园区1号仓库</span>
                                </p>
                                <p><span>采购商：</span>
                                    <span>伏尔加河贸易有限公司</span>
                                </p>
                            </a>
                        </li>
                        <li class="pt">
                            <a href="#">
                                <div class="name my-ellipsis">
                                    XD123456789<span class="order-tag-red">执行中</span>
                                </div>
                                <p><span>商品：</span>
                                    <span class="c-purple">红富士苹果、小乡里、东北大番茄</span>
                                </p>
                                <p><span>交货地：</span>
                                    <span>乌兰乌德满洲里园区1号仓库</span>
                                </p>
                                <p><span>采购商：</span>
                                    <span>伏尔加河贸易有限公司</span>
                                </p>
                            </a>
                        </li>
                        <li class="pt">
                            <a href="#">
                                <div class="name my-ellipsis">
                                    XD123456789<span class="order-tag-gray">已取消</span>
                                </div>
                                <p><span>商品：</span>
                                    <span class="c-purple">红富士苹果、小乡里、东北大番茄</span>
                                </p>
                                <p><span>交货地：</span>
                                    <span>乌兰乌德满洲里园区1号仓库</span>
                                </p>
                                <p><span>采购商：</span>
                                    <span>伏尔加河贸易有限公司</span>
                                </p>
                            </a>
                        </li>
                        <li class="pt">
                            <a href="#">
                                <div class="name my-ellipsis">
                                    XD123456789<span class="order-tag-red">执行中</span>
                                </div>
                                <p><span>商品：</span>
                                    <span class="c-purple">红富士苹果、小乡里、东北大番茄</span>
                                </p>
                                <p><span>交货地：</span>
                                    <span>乌兰乌德满洲里园区1号仓库</span>
                                </p>
                                <p><span>采购商：</span>
                                    <span>伏尔加河贸易有限公司</span>
                                </p>
                            </a>
                        </li>
                        <li class="pt">
                            <a href="#">
                                <div class="name my-ellipsis">
                                    XD123456789<span class="order-tag-gray">已取消</span>
                                </div>
                                <p><span>商品：</span>
                                    <span class="c-purple">红富士苹果、小乡里、东北大番茄</span>
                                </p>
                                <p><span>交货地：</span>
                                    <span>乌兰乌德满洲里园区1号仓库</span>
                                </p>
                                <p><span>采购商：</span>
                                    <span>伏尔加河贸易有限公司</span>
                                </p>
                            </a>
                        </li>
                    </ul>

                    <div id="page1-pull-up" class="pull-up">
                        <span class="pull-up-icon"></span>
                        <span id="page1-pull-up-label"  class="pull-up-label">上拉加载更多...</span>
                    </div>

                </div>
            </div>

            <div id="page2-wrapper" class="scroll-wrapper animated ">
                <div id="scroller2" class="scroller">

                    <div id="page2-pull-down" class="pull-down">
                        <span class="pull-down-icon"></span>
                        <span id="page2-pull-down-label" class="pull-down-label">下拉刷新...</span>
                    </div>

                    <ul class="news-list pt-list">
                        <li class="pt">
                            <a href="#">
                                <div class="name my-ellipsis">
                                    XD123456789<span class="order-tag-red">执行中</span>
                                </div>
                                <p><span>商品：</span>
                                    <span class="c-purple">红富士苹果、小乡里、东北大番茄</span>
                                </p>
                                <p><span>交货地：</span>
                                    <span>乌兰乌德满洲里园区1号仓库</span>
                                </p>
                                <p><span>采购商：</span>
                                    <span>伏尔加河贸易有限公司</span>
                                </p>
                            </a>
                        </li>
                        <li class="pt">
                            <a href="#">
                                <div class="name my-ellipsis">
                                    XD123456789<span class="order-tag-red">执行中</span>
                                </div>
                                <p><span>商品：</span>
                                    <span class="c-purple">红富士苹果、小乡里、东北大番茄</span>
                                </p>
                                <p><span>交货地：</span>
                                    <span>乌兰乌德满洲里园区1号仓库</span>
                                </p>
                                <p><span>采购商：</span>
                                    <span>伏尔加河贸易有限公司</span>
                                </p>
                            </a>
                        </li>
                        <li class="pt">
                            <a href="#">
                                <div class="name my-ellipsis">
                                    XD123456789<span class="order-tag-red">执行中</span>
                                </div>
                                <p><span>商品：</span>
                                    <span class="c-purple">红富士苹果、小乡里、东北大番茄</span>
                                </p>
                                <p><span>交货地：</span>
                                    <span>乌兰乌德满洲里园区1号仓库</span>
                                </p>
                                <p><span>采购商：</span>
                                    <span>伏尔加河贸易有限公司</span>
                                </p>
                            </a>
                        </li>
                        <li class="pt">
                            <a href="#">
                                <div class="name my-ellipsis">
                                    XD123456789<span class="order-tag-red">执行中</span>
                                </div>
                                <p><span>商品：</span>
                                    <span class="c-purple">红富士苹果、小乡里、东北大番茄</span>
                                </p>
                                <p><span>交货地：</span>
                                    <span>乌兰乌德满洲里园区1号仓库</span>
                                </p>
                                <p><span>采购商：</span>
                                    <span>伏尔加河贸易有限公司</span>
                                </p>
                            </a>
                        </li>
                        <li class="pt">
                            <a href="#">
                                <div class="name my-ellipsis">
                                    XD123456789<span class="order-tag-red">执行中</span>
                                </div>
                                <p><span>商品：</span>
                                    <span class="c-purple">红富士苹果、小乡里、东北大番茄</span>
                                </p>
                                <p><span>交货地：</span>
                                    <span>乌兰乌德满洲里园区1号仓库</span>
                                </p>
                                <p><span>采购商：</span>
                                    <span>伏尔加河贸易有限公司</span>
                                </p>
                            </a>
                        </li>
                        <li class="pt">
                            <a href="#">
                                <div class="name my-ellipsis">
                                    XD123456789<span class="order-tag-red">执行中</span>
                                </div>
                                <p><span>商品：</span>
                                    <span class="c-purple">红富士苹果、小乡里、东北大番茄</span>
                                </p>
                                <p><span>交货地：</span>
                                    <span>乌兰乌德满洲里园区1号仓库</span>
                                </p>
                                <p><span>采购商：</span>
                                    <span>伏尔加河贸易有限公司</span>
                                </p>
                            </a>
                        </li>

                    </ul>

                    <div id="page2-pull-up" class="pull-up">
                        <span class="pull-up-icon"></span>
                        <span id="page2-pull-up-label"  class="pull-up-label">上拉加载更多...</span>
                    </div>
                </div>
            </div>

            <div id="page3-wrapper" class="scroll-wrapper animated ">
                <div id="scroller3" class="scroller">

                    <div id="page3-pull-down" class="pull-down">
                        <span class="pull-down-icon"></span>
                        <span id="page3-pull-down-label" class="pull-down-label">下拉刷新...</span>
                    </div>

                    <ul class="campaigns-list pt-list">
                        <li class="pt">
                            <a href="#">
                                <div class="name my-ellipsis">
                                    XD123456789<span class="order-tag-gray">已取消</span>
                                </div>
                                <p><span>商品：</span>
                                    <span class="c-purple">红富士苹果、小乡里、东北大番茄</span>
                                </p>
                                <p><span>交货地：</span>
                                    <span>乌兰乌德满洲里园区1号仓库</span>
                                </p>
                                <p><span>采购商：</span>
                                    <span>伏尔加河贸易有限公司</span>
                                </p>
                            </a>
                        </li>
                        <li class="pt">
                            <a href="#">
                                <div class="name my-ellipsis">
                                    XD123456789<span class="order-tag-gray">已取消</span>
                                </div>
                                <p><span>商品：</span>
                                    <span class="c-purple">红富士苹果、小乡里、东北大番茄</span>
                                </p>
                                <p><span>交货地：</span>
                                    <span>乌兰乌德满洲里园区1号仓库</span>
                                </p>
                                <p><span>采购商：</span>
                                    <span>伏尔加河贸易有限公司</span>
                                </p>
                            </a>
                        </li>
                        <li class="pt">
                            <a href="#">
                                <div class="name my-ellipsis">
                                    XD123456789<span class="order-tag-gray">已取消</span>
                                </div>
                                <p><span>商品：</span>
                                    <span class="c-purple">红富士苹果、小乡里、东北大番茄</span>
                                </p>
                                <p><span>交货地：</span>
                                    <span>乌兰乌德满洲里园区1号仓库</span>
                                </p>
                                <p><span>采购商：</span>
                                    <span>伏尔加河贸易有限公司</span>
                                </p>
                            </a>
                        </li>
                        <li class="pt">
                            <a href="#">
                                <div class="name my-ellipsis">
                                    XD123456789<span class="order-tag-gray">已取消</span>
                                </div>
                                <p><span>商品：</span>
                                    <span class="c-purple">红富士苹果、小乡里、东北大番茄</span>
                                </p>
                                <p><span>交货地：</span>
                                    <span>乌兰乌德满洲里园区1号仓库</span>
                                </p>
                                <p><span>采购商：</span>
                                    <span>伏尔加河贸易有限公司</span>
                                </p>
                            </a>
                        </li>
                        <li class="pt">
                            <a href="#">
                                <div class="name my-ellipsis">
                                    XD123456789<span class="order-tag-gray">已取消</span>
                                </div>
                                <p><span>商品：</span>
                                    <span class="c-purple">红富士苹果、小乡里、东北大番茄</span>
                                </p>
                                <p><span>交货地：</span>
                                    <span>乌兰乌德满洲里园区1号仓库</span>
                                </p>
                                <p><span>采购商：</span>
                                    <span>伏尔加河贸易有限公司</span>
                                </p>
                            </a>
                        </li>
                        <li class="pt">
                            <a href="#">
                                <div class="name my-ellipsis">
                                    XD123456789<span class="order-tag-gray">已取消</span>
                                </div>
                                <p><span>商品：</span>
                                    <span class="c-purple">红富士苹果、小乡里、东北大番茄</span>
                                </p>
                                <p><span>交货地：</span>
                                    <span>乌兰乌德满洲里园区1号仓库</span>
                                </p>
                                <p><span>采购商：</span>
                                    <span>伏尔加河贸易有限公司</span>
                                </p>
                            </a>
                        </li>
                        <li class="pt">
                            <a href="#">
                                <div class="name my-ellipsis">
                                    XD123456789<span class="order-tag-gray">已取消</span>
                                </div>
                                <p><span>商品：</span>
                                    <span class="c-purple">红富士苹果、小乡里、东北大番茄</span>
                                </p>
                                <p><span>交货地：</span>
                                    <span>乌兰乌德满洲里园区1号仓库</span>
                                </p>
                                <p><span>采购商：</span>
                                    <span>伏尔加河贸易有限公司</span>
                                </p>
                            </a>
                        </li>
                    </ul>

                    <div id="page3-pull-up" class="pull-up">
                        <span class="pull-up-icon"></span>
                        <span id="page3-pull-up-label"  class="pull-up-label">上拉加载更多...</span>
                    </div>
                </div>
            </div>
        </div>

        <script>
            $(function(){
                $("#nav-index li a").tap(function(e){
                    e.preventDefault();
                    
                    var lastIndex = $("#nav-index").attr("data-active");
                    var index =  $(this).parent().index() + 1;
                    if(lastIndex != index) {
                        $("#nav-index").removeAttr("class");
                        $("#nav-index").addClass("active" + index);
                        $("#nav-index").attr("data-active", index);
                        $(".scroll-wrapper").removeClass("slideInRight slideInLeft slideOutRight slideOutLeft");
                        if(index < lastIndex) {
                            $("#page" + lastIndex + "-wrapper").addClass("slideOutRight");
                            $("#page" + index + "-wrapper").addClass("slideInLeft active");
                        } else { 
                            $("#page" + lastIndex + "-wrapper").addClass("slideOutLeft");
                            $("#page" + index + "-wrapper").addClass("slideInRight active");
                        }

                        setTimeout(function(){
                            $("#page" + lastIndex + "-wrapper").removeClass("active");
                        },500)
                    }
                })
            });
            // page1 下拉刷新
            function p1PullDown() {
                console.log("p1PullDown");
                // window.location.reload();
            }
            // page2 上拉加载更多
            function p1PullUp() {
                console.log("p1PullUp");
                // $.getJSON("p1PullDown", function (data) {
                    
                // });
            }

            // page2 下拉刷新
            function p2PullDown() {
                console.log("p2PullDown");
                // window.location.reload();
            }
            // page2 上拉加载更多
            function p2PullUp() {
                console.log("p2PullUp");
                // $.getJSON("p2PullDown", function (data) {
                    
                // });
            }

            // page3 下拉刷新
            function p3PullDown() {
                console.log("p3PullDown");
                // window.location.reload();
            }
            // page3 上拉加载更多
            function p3PullUp() {
                console.log("p3PullUp");
                // $.getJSON("p3PullDown", function (data) {
                    
                // });
            }

            $(".container").height(h - 44);

            var contentHeight = $(".container").height() - 44;
            $(".scroll-wrapper").height(contentHeight);
            
            var scroll1, scroll2, scroll3;
           
            document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
            document.addEventListener('DOMContentLoaded', function(){
                scroll1 = new Scroll();
                scroll2 = new Scroll();
                scroll3 = new Scroll();
                scroll1.loaded('page1', p1PullDown, p1PullUp);
                scroll2.loaded('page2', p2PullDown, p2PullUp);
                scroll3.loaded('page3', p3PullDown, p3PullUp);
            }, false);

        </script>
        
    </body>
</html>